<template>
  <a-layout>
    <a-layout-header class="layout-header">
      <a-space class="operate-btn-group">
        <a-button
          type="link"
          style="margin-left: -24px"
          @click="$router.push('/')"
        >
          <template #icon>
            <ArrowLeftOutlined />
          </template>
          <span>返回</span>
        </a-button>
      </a-space>
      <a-space class="operate-btn-group">
        <a-select
          style="width: 220px"
          :options="formTemplateList"
          v-model:value="templateFile"
        ></a-select>
        <a-button type="primary" @click="handlePreviewCode">代码预览</a-button>
        <a-button type="primary" @click="handlePreviewMetaCode">
          查看元数据
        </a-button>
      </a-space>
    </a-layout-header>
    <a-layout-content>
      <a-layout has-sider>
        <a-layout-content>
          <div class="table-wrapper">
            <component :is="CurrentTableComponent" />
          </div>
        </a-layout-content>
        <a-layout-sider class="right" width="300px">
          <AttrSettings />
        </a-layout-sider>
      </a-layout>
    </a-layout-content>
  </a-layout>
  <PreviewCode v-model:modelValue="codeModalVisible" :codeObj="codeObj" />
</template>
<script setup>
import { ref, computed, watch } from "vue";
import { ArrowLeftOutlined } from "@ant-design/icons-vue";
import { storeToRefs } from "pinia";
import { useTableStore } from "@/store/table";
import AttrSettings from "./components/AttrSettings/index.vue";
import ElementTableComponent from "./components/TableComponent/ElementTable/index.vue";
import AntdTableComponent from "./components/TableComponent/AntdTable/index.vue";
import PreviewCode from "./components/PreviewCode/index.vue";

import { genCode } from "./util/genCode";

const formTemplateList = ref([]);
const modules = import.meta.glob("./template/*.vue", { as: "raw" });
for (const path in modules) {
  modules[path]().then((mod) => {
    const fileName = /\.\/template\/([\w\-]+)\.vue/.exec(path)?.[1] ?? "";
    formTemplateList.value.push({
      label: fileName,
      value: fileName,
    });
  });
}

const store = useTableStore();

const { templateFile, tableProps, fieldList, queryList } = storeToRefs(store);
const CurrentTableComponent = computed(() => {
  return templateFile.value.startsWith("Element")
    ? ElementTableComponent
    : AntdTableComponent;
});
watch(
  () => templateFile.value,
  () => {
    store.setTemplateFile(templateFile.value);
  }
);

// 代码预览
const codeObj = ref({});
const codeModalVisible = ref(false);
async function handlePreviewCode() {
  if (fieldList.value.length > 0) {
    codeObj.value = await genCode(
      templateFile.value,
      tableProps.value,
      fieldList.value,
      queryList.value,
      store
    );
    codeModalVisible.value = true;
  }
}

function handlePreviewMetaCode() {
  codeObj.value["App.vue"] = JSON.stringify(
    {
      queryParams: queryList.value,
      tableColumns: fieldList.value,
    },
    null,
    2
  );
  codeModalVisible.value = true;
}
</script>

<style lang="less" scoped>
@header-height: 60px;
@border-style:1px solid #ddd;

.ant-layout .ant-layout-header {
  height: @header-height;
  line-height: @header-height;
  background: #fff !important;
  border-bottom: @border-style;
  padding: 0 20px;
  .operate-btn-group {
    height: 100%;
  }
}

.ant-layout .ant-layout-content {
  height: calc(100vh - @header-height);
}

.ant-layout .ant-layout-sider {
  height: calc(100vh - @header-height);
  background: #fff !important;
  border-right: @border-style;
  overflow: "auto";
  position: "fixed";
  top: 0;
  bottom: 0;
  right: 0;
  border-right: none;
  border-left: @border-style;
}
.table-wrapper {
  padding: 15px 20px;
  height: 100%;
}
.layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
